<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--必要样式-->
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="/css/laypage.css"type="text/css">
    <link rel="stylesheet" href="/css/city-picker.css"  type="text/css" />
    <link rel="stylesheet" href="/layui-util/css/layui.css" type="text/css">
    <script type="text/javascript" src="/layui-util/layui.all.js"></script>
    <script type="text/javascript" src="/layui-util/layui.js"></script>

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <style>
        .wenzitou-anKang{
            font-family: 华文行楷;
            font-size: 33px;
            color: #FD7244;
            position: relative;
            top: 17px;
            left: 222px;
        }
        .wenzitou-yongxin{
            font-size: 20px;
            font-family: 华文楷体;
            font-weight: 900;
            position: relative;
            top: 22px;
            left: 231px;
            color: #A60000;
        }
        .touBuTuPian{
            margin: 0px auto;
            position: relative;
            top: -12px;
        }
        .youBian-tuPian{
            position: relative;
            top: 58px;
        }

        .layui-form-item{
           margin-top:30px;
            margin-left: 30px;
        }
        .error{
            font-family: 宋体;
            color:red;
        }

    </style>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <section class="panel">
                        <header class="panel-heading">
                            信康车险
                        </header>
<div style="background-color: ; width: 1200px;margin: 0px auto;">
    <!--头部分-->
    <div style="width: 1200px;height: 60px; display: block; background-color: ;">
        <span class="wenzitou-anKang">信康车险</span>
        <span class="wenzitou-yongxin">省&nbsp;&nbsp;心&nbsp;.&nbsp;省&nbsp;&nbsp;钱</span>
    </div>
    <!--图片-->
    <!--轮播-->
    <div class="layui-carousel" id="test1"  style="background-color: ; width: 1200px;height: 280px">
        <div carousel-item>
            <div style="background-color: ; "><img src="/images/counts/2345截图20180110201906.png"></div>
            <div style="background-color: ; "><img src="/images/counts/2345截图20180110154312.png"></div>
        </div>
    </div>

    &nbsp;&nbsp;
    <!--表格部分-->
    <div style="width: 1000px;height: 400px; background-color: #FD7244; margin: 0px auto; ">
        <!--左边-->
        <div style="display: inline-block;width: 485px; height: 380px; background-color: #FFFFFF;margin-left: 10px; margin-top: 10px;margin-right: 7px; ">
            <!--头部图片-->
            <div style="width: 485px; height: 58px; background-color: #FFFFFF;position: absolute;" id="biaoti">
                <div style="width: 320px;height: 58px;" class="touBuTuPian">
                    <img  src="/images/counts/2345截图20180111150816.png">
                </div>
            </div>
            <form action="/count/BeforetoAfter" method="post" id="form"  >
                <div style="width: 485px; height: 322px;background-color: ;" class="youBian-tuPian">
                    <!--年月-->
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 120px;height: 38px">购车年月：</label>
                        <div class="layui-input-inline">
                            <input type="text" style="width: 262px;" class="layui-input" id="test3" placeholder="yyyy年MM月" required>
                        </div>
                    </div>

                    <!--级联-->
                    <div id="distpicker" style="margin-right: 20px;display: inline">
                        <div class="form-group" style="width: 260px;">
                            <label class="layui-form-label" style="width: 120px; height: 38px">所在城市：</label>
                            <div style="position: relative;width: 260px;margin-left: 101px;">
                                <input id="city-picker3" style="width: 260px;" class="form-control" readonly type="text" value="河南省/郑州市/二七区" data-toggle="city-picker">

                            </div>
                        </div>

                        <!--年月-->
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 120px;height: 38px">车辆价格：</label>
                            <div class="layui-input-inline">
                                <input style="width: 85px;" type="text" id="isDigits" name="isDigits" required  placeholder="单位：元"  value="" autocomplete="off" class="layui-input">
                               <#-- <input style="width: 85px;" type="hidden" name="fangan" required    value="1"  >-->
                                <td></td>
                            </div>&nbsp;&nbsp;元
                        </div>



                        <div class="layui-inline" >
                            <label class="layui-form-label" style="width: 120px;height: 38px">手机号码：</label>
                            <div class="layui-input-inline" style="margin-outside: 20px">
                                <input id="isMobile" name="isMobile" style="width: 262px;" type="text"  required  placeholder="手机号码"  value="" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-form-item"  >
                            <div class="layui-input-block"  >
                                <button type="reset " class="layui-btn layui-btn-primary">重置</button>
                                <button type="submit" class="layui-btn">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!--右边-->
        <div style="display: inline-block; width: 485px; height: 380px; background-color: #FFFFFF;position: absolute;margin-top: 10px; ">
            <!--头部图片-->
            <div style="width: 485px; height: 58px; background-color: #FFFFFF;position: absolute;" >
                <div style="width: 320px;height: 58px;" class="touBuTuPian">
                    <img  src="/images/counts/2345截图20180110204914.png">
                </div>
            </div>
            <div style="width: 485px; height: 322px;background-color: ;" class="youBian-tuPian">
                <img  src="/images/counts/2345截图20180111091534.png">
            </div>
        </div>
    </div>

    <br>


</div>

                    </section>
                </div>
            </div>
            </div>
        </section>
       <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/js/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/js/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/js/jquery.validation/1.14.0/validate-methods.js"></script>
<!--级联-->
<script src="/js/bootstrap.js"></script>
<script src="/js/count/city-picker.data.js"></script>
<script src="/js/count/city-picker.js"></script>
<script src="/js/count/main.js"></script>

</body>
</html>


<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        var myDate = new Date();

        //年月选择器
        laydate.render({
            elem: '#test3'
            , type: 'month',
            format:'yyyy年MM月',
            max:'myDate'
        });
    });

    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });



   $("#form").validate({
        rules:{
            isMobile:{
                isMobile:true
            },
            isDigits:{
                isDigits:true
            }
        },
        messages:{
            isMobile:{
                isMobile:"手机号格式不正确"
            },
            isDigits:{
                isDigits:"请输入正确的金额"
            }
        }

    });

</script>
